<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/index1.css">
  </head>
  <body>
    <!-- 头部-->
    <header>
      <!-- logo-->
      <div class="logo">
          <!-- 左侧-->
        <div class="left">
          <h1>C<b>a</b>lm</h1>
          <span class="text">我的博客</span>
        </div>
          <!-- 右侧-->
        <div class="right">
          <ul>
            <li class="active">
              <a href="#">首页</a>
            </li>
            <li>
                <a href="#">博客</a>
            </li>
            <li>
                <a href="#">公告</a>
            </li>
            <li>
                <a href="#">联系</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 导航-->
      <nav>
        <!-- zuo-->
        <div class="zuo">
          欢迎来到我的博客！
        </div>
        <!-- you-->
        <div class="you">
          <ul>
            <li class="qq">
              <a href="#">QQ</a>
            </li>
            <li class="weibo">
                <a href="#">微博</a>
            </li>
            <li class="weixin">
                <a href="#">微信</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <!-- 内容-->
  <div class="neirong">
    <!-- 新闻-->
    <div class="biaoti">
      <ul>
        <li>
          <a href="#">All</a>/
        </li>
        <li>
          <a href="#">Design</a>/
        </li>
        <li>
          <a href="#">Branding</a>/
        </li>
        <li>
          <a href="#">Graphic</a>/
        </li>
        <li>
          <a href="#">Animation</a>/
        </li>
      </ul>


    </div>
    
  </div>
  <!-- 尾部-->
  <footer>
    <!-- 左边-->
    <div class="left">

    </div>
    <!-- 右边边-->
    <div class="right">

    </div>
  </footer>
  </body>
</html>
